import { STATUSCONFIRMTEXT } from '@/constant'
import { FACTORY_TYPE_OPTIONS, FIT_HEAT_OPTIONS, PRICE_BAND_OPTIONS, THICKNESS_OPTIONS } from '@/constant/goods'
import { CooperateStatusOptions } from '@/constant/supplier'
import { IOptionClass } from '@/hooks/useGetClassIds'
import { useAppSelector } from '@/store/hooks'
import { validateOutPackageNum } from '@/utils/validator'
import { MinusSquareOutlined, PlusSquareOutlined } from '@ant-design/icons'
import { Dropdown, Empty, Image, Input, Select, Space, TableColumnsType, Typography } from 'antd'
import { FormInstance } from 'antd/es/form/Form'
import React from 'react'
import { IColorListType, ITableData, ITableDataColor, ITableDataFabric, ProductPlanningVO } from './types'

export const useFormBase = ({
  SupplierOption,
  handleSearchSupplier,
  SupplierOptionOther,
  handleSearchSupplierOther,
  DICTDATA,
  mainSupplierCode,
  sizeRange,
  SizeGroupOptions,
  FormStyle,
  productTemplateVO,
  detailInfo,
}: {
  SupplierOption: IOptionItem[]
  handleSearchSupplier: (newValue: string) => void
  SupplierOptionOther: IOptionItem[]
  handleSearchSupplierOther: (newValue: string) => void
  DICTDATA: Record<string, IOptionItem[]>
  mainSupplierCode: string | number
  sizeRange: (number | string)[]
  SizeGroupOptions: IOptionItem[]
  FormStyle: FormInstance
  productTemplateVO: IGoodsTemplateType
  detailInfo?: Record<string, any>
}): IItemArray[] => {
  const SupplierOptionNotMain = SupplierOptionOther?.filter((item) => item.value != mainSupplierCode)
  const BaseSizeCodeOption = SizeGroupOptions?.filter((item) => sizeRange?.includes(item.value))
  const originConfig = [
    {
      name: 'spuName',
      label: '款式名称',
      type: 'Input',
      placeholder: '请输入款式名称',
      rules: [
        {
          required: true,
          message: '请输入款式名称',
        },
      ],
      hidden: false,
      warning_flag: false,
    },
    {
      name: 'mainSupplierCode',
      label: '主供应商',
      type: 'Select',
      option: SupplierOption,
      placeholder: '请选择主供应商',
      rules: [
        {
          required: true,
          message: '请选择主供应商',
        },
      ],
      hidden: false,
      warning_flag: false,
      config: {
        suffixIcon: null,
        showSearch: true,
        optionFilterProp: 'label',
        filterOption: false,
        onSearch: handleSearchSupplier,
        onChange: (val: string) => {
          const otherSupplierCodeList: string[] = FormStyle.getFieldValue('otherSupplierCodeList')
          if (otherSupplierCodeList && otherSupplierCodeList.length > 0 && val) {
            const filterCodes = otherSupplierCodeList?.filter((it) => it != val)
            FormStyle.setFieldValue('otherSupplierCodeList', filterCodes)
          }
        },
      },
    },
    {
      name: 'factoryTypeCode',
      label: '工厂类型',
      type: 'Select',
      option: FACTORY_TYPE_OPTIONS,
      placeholder: '请选择工厂类型',
      hidden: false,
      warning_flag: false,
      rules: [
        {
          required: true,
          message: '请选择工厂类型',
        },
      ],
      config: {
        optionFilterProp: 'label',
      },
    },
    // {
    //   name: 'originSalePrice',
    //   label: '预估吊牌价',
    //   type: 'InputNumber',
    //   placeholder: '请输入预估吊牌价',
    //   hidden: !NoPlan,
    //   rules: [
    //     {
    //       required: true,
    //       message: '请输入预估吊牌价',
    //     },
    //   ],
    //   config: {
    //     precision: 2,
    //     min: 0,
    //   },
    // },
    {
      name: 'designerName',
      label: '设计师/买手',
      type: 'Input',
      placeholder: '请输入设计师/买手',
      rules: [
        {
          required: true,
          message: '请输入设计师/买手',
        },
      ],
    },
    {
      name: 'productSeries',
      label: '商品系列',
      type: 'Input',
      placeholder: '请输入商品系列',
      hidden: false,
      warning_flag: false,
      rules: [
        {
          required: false,
          message: '请输入商品系列',
        },
      ],
    },
    {
      name: 'otherSupplierCodeList',
      label: '其他可生产供应商',
      type: 'Select',
      option: SupplierOptionNotMain,
      placeholder: '请选择其他可生产供应商',
      hidden: false,
      warning_flag: false,
      config: {
        suffixIcon: null,
        showSearch: true,
        optionFilterProp: 'label',
        filterOption: false,
        mode: 'multiple',
        maxTagCount: 'responsive',
        onSearch: handleSearchSupplierOther,
      },
    },
    {
      name: 'sizeRange',
      label: '尺码范围',
      type: 'Select',
      option: SizeGroupOptions,
      placeholder: '请选择尺码范围',
      hidden: false,
      warning_flag: false,
      rules: [
        {
          required: false,
          message: '请选择尺码范围',
        },
      ],
      config: {
        optionFilterProp: 'label',
        mode: 'multiple',
        maxTagCount: 'responsive',
        onChange: () => {
          FormStyle.setFieldValue('baseSizeCode', null)
        },
      },
    },
    {
      name: 'baseSizeCode',
      label: '基码',
      type: 'Select',
      option: BaseSizeCodeOption,
      placeholder: '请选择基码',
      hidden: false,
      warning_flag: false,
      rules: [
        {
          required: false,
          message: '请选择基码',
        },
      ],
      config: {
        optionFilterProp: 'label',
      },
    },
    {
      name: 'patternType',
      label: '版型',
      type: 'Input',
      placeholder: '请输入版型',
      hidden: false,
      warning_flag: false,
      rules: [
        {
          required: false,
          message: '请输入版型',
        },
      ],
      config: {
        showCount: true,
        maxLength: 50,
      },
    },
    {
      name: 'collarType',
      label: '领型',
      type: 'Input',
      placeholder: '请输入领型',
      hidden: false,
      warning_flag: false,
      rules: [
        {
          required: false,
          message: '请输入领型',
        },
      ],
      config: {
        showCount: true,
        maxLength: 50,
      },
    },
    {
      name: 'flowerType',
      label: '花型',
      type: 'Input',
      placeholder: '请输入花型',
      hidden: false,
      warning_flag: false,
      rules: [
        {
          required: false,
          message: '请输入花型',
        },
      ],
      config: {
        showCount: true,
        maxLength: 50,
      },
    },
    {
      name: 'moduleType',
      label: '杯型',
      type: 'Select',
      option: DICTDATA.module_type,
      placeholder: '请输入杯型',
      hidden: false,
      warning_flag: false,
      rules: [
        {
          required: false,
          message: '请输入杯型',
        },
      ],
      config: {
        showSearch: true,
        filterOption: true,
      },
    },
    {
      name: 'laterThan',
      label: '后比',
      type: 'Select',
      option: DICTDATA.later_than,
      placeholder: '请输入后比',
      hidden: false,
      warning_flag: false,
      rules: [
        {
          required: false,
          message: '请输入后比',
        },
      ],
      config: {
        showSearch: true,
        filterOption: true,
      },
    },
    {
      name: 'moldCupMaterial',
      label: '模杯材质',
      type: 'Input',
      placeholder: '请输入模杯材质',
      hidden: false,
      warning_flag: false,
      rules: [
        {
          required: false,
          message: '请输入模杯材质',
        },
      ],
      config: {
        showCount: true,
        maxLength: 50,
      },
    },
    {
      name: 'moldCupThickness',
      label: '模杯厚度',
      type: 'Select',
      option: DICTDATA.mold_cup_thickness,
      placeholder: '请输入模杯厚度',
      hidden: false,
      warning_flag: false,
      rules: [
        {
          required: false,
          message: '请输入模杯厚度',
        },
      ],
      config: {
        showSearch: true,
        filterOption: true,
      },
    },
    {
      name: 'moldCupShape',
      label: '模杯形状',
      type: 'Select',
      option: DICTDATA.mold_cup_shape,
      placeholder: '请输入模杯形状',
      hidden: false,
      warning_flag: false,
      rules: [
        {
          required: false,
          message: '请输入模杯形状',
        },
      ],
      config: {
        showSearch: true,
        filterOption: true,
      },
    },
    {
      name: 'breasted',
      label: '排扣',
      type: 'Select',
      option: DICTDATA.breasted,
      placeholder: '请输入排扣',
      hidden: false,
      warning_flag: false,
      rules: [
        {
          required: false,
          message: '请输入排扣',
        },
      ],
      config: {
        showSearch: true,
        filterOption: true,
      },
    },
    {
      name: 'fabricType',
      label: '面料',
      type: 'Input',
      placeholder: '请输入面料',
      hidden: false,
      warning_flag: false,
      rules: [
        {
          required: false,
          message: '请输入面料',
        },
      ],
      config: {
        showCount: true,
        maxLength: 50,
      },
    },
    {
      name: 'functionType',
      label: '功能',
      type: 'Select',
      option: DICTDATA.function,
      placeholder: '请选择功能',
      hidden: false,
      warning_flag: false,
      rules: [
        {
          required: false,
          message: '请选择功能',
        },
      ],
      config: {
        mode: 'multiple',
        maxTagCount: 'responsive',
        showSearch: true,
        filterOption: true,
      },
    },
    {
      name: 'styleCode',
      label: '风格',
      type: 'Select',
      option: DICTDATA.style,
      placeholder: '请选择风格',
      hidden: false,
      warning_flag: false,
      rules: [
        {
          required: false,
          message: '请选择风格',
        },
      ],
      config: {
        showSearch: true,
        filterOption: true,
      },
    },
    {
      name: 'patternLayoutCode',
      label: '图案布局',
      type: 'Select',
      option: DICTDATA.pattern_layout,
      placeholder: '请选择图案布局',
      hidden: false,
      warning_flag: false,
      rules: [
        {
          required: false,
          message: '请选择图案布局',
        },
      ],
      config: {
        showSearch: true,
        filterOption: true,
      },
    },
    {
      name: 'elementCode',
      label: '元素',
      type: 'Select',
      option: DICTDATA.element,
      placeholder: '请选择元素',
      hidden: false,
      warning_flag: false,
      rules: [
        {
          required: false,
          message: '请选择元素',
        },
      ],
      config: {
        showSearch: true,
        filterOption: true,
      },
    },
    {
      name: 'technicsCode',
      label: '工艺',
      type: 'Select',
      option: DICTDATA.technics,
      placeholder: '请选择工艺',
      hidden: false,
      warning_flag: false,
      rules: [
        {
          required: false,
          message: '请选择工艺',
        },
      ],
      config: {
        showSearch: true,
        filterOption: true,
      },
    },
    {
      name: 'sellTempCode',
      label: '适卖温度',
      type: 'Select',
      option: FIT_HEAT_OPTIONS,
      placeholder: '请选择适卖温度',
      hidden: false,
      warning_flag: false,
      rules: [
        {
          required: false,
          message: '请选择适卖温度',
        },
      ],
      config: {
        showSearch: true,
        filterOption: true,
        optionFilterProp: 'label',
      },
    },
    {
      name: 'gramWeight',
      label: '克重',
      type: 'InputNumber',
      placeholder: '请输入克重',
      hidden: false,
      warning_flag: false,
      rules: [
        {
          required: false,
          message: '请输入克重',
        },
      ],
      config: {
        precision: 2,
        min: 0,
      },
    },
    {
      name: 'thicknessCode',
      label: '厚度',
      type: 'Select',
      option: THICKNESS_OPTIONS,
      placeholder: '请选择厚度',
      hidden: false,
      warning_flag: false,
      rules: [
        {
          required: false,
          message: '请选择厚度',
        },
      ],
      config: {
        showSearch: true,
        filterOption: true,
        optionFilterProp: 'label',
      },
    },
    {
      name: 'ageCode',
      label: '年龄段',
      type: 'Select',
      option: DICTDATA.age_level,
      placeholder: '请选择年龄段',
      hidden: false,
      warning_flag: false,
      rules: [
        {
          required: false,
          message: '请选择年龄段',
        },
      ],
      config: {
        showSearch: true,
        filterOption: true,
        optionFilterProp: 'label',
      },
    },
    {
      name: 'spuCost',
      label: '款式成本',
      type: 'InputNumber',
      placeholder: '请输入款式成本',
      config: {
        precision: 2,
        min: 0,
        onChange: (val: number) => {
          if (detailInfo?.originSalePrice) {
            const res = (((detailInfo?.originSalePrice - val) / detailInfo?.originSalePrice) * 100).toFixed(2)
            FormStyle.setFieldValue('realProfitRate', res)
          }
          if (!val) FormStyle.setFieldValue('realProfitRate', '')
        },
      },
    },
    {
      name: 'realProfitRate',
      label: '实际毛利率',
      type: 'InputNumber',
      placeholder: '实际毛利率',
      config: {
        disabled: true,
        precision: 2,
        min: 0,
      },
    },
    {
      name: 'factorySpuCode',
      label: '厂家款号',
      type: 'Input',
      placeholder: '请输入厂家款号',
      rules: [
        {
          required: true,
          message: '请输入厂家款号',
        },
      ],
    },
  ]
  if (productTemplateVO) {
    originConfig.forEach((it) => {
      // 忽略必填与非必填
      productTemplateVO.required?.forEach((item) => {
        if (it.name === item) {
          it.warning_flag = true
        }
      })
      productTemplateVO.notShow?.forEach((item) => {
        if (it.name === item) {
          it.hidden = true
        }
      })
    })
  }
  return originConfig
}

export const useFormCalc = ({ DICTDATA }: { DICTDATA: Record<string, IOptionItem[]> }): IItemArray[] => {
  return [
    {
      name: 'outPackageTypeCode',
      label: '外包方式',
      type: 'Select',
      option: DICTDATA.ectocyst_type,
      placeholder: '请选择外包方式',
      config: {
        optionFilterProp: 'label',
      },
      rules: [
        {
          required: true,
          message: '请选择外包方式',
        },
      ],
    },
    {
      name: 'midPackageTypeCode',
      label: '中包标识',
      type: 'Select',
      option: DICTDATA.inbag_identity,
      placeholder: '请选择中包标识',
      config: {
        optionFilterProp: 'label',
      },
      rules: [
        {
          required: true,
          message: '请选择中包标识',
        },
      ],
    },
    {
      name: 'packageTypeCode',
      label: '包装方式',
      type: 'Select',
      option: DICTDATA.pack_type,
      placeholder: '请选择包装方式',
      config: {
        optionFilterProp: 'label',
      },
      rules: [
        {
          required: true,
          message: '请选择包装方式',
        },
      ],
    },
    {
      name: 'weightUnitCode',
      label: '计量单位',
      type: 'Select',
      option: DICTDATA.uom,
      placeholder: '请选择计量单位',
      config: {
        optionFilterProp: 'label',
      },
      rules: [
        {
          required: true,
          message: '请选择计量单位',
        },
      ],
    },
    {
      name: 'inPackageNum',
      label: '内箱数',
      type: 'InputNumber',
      placeholder: '请输入内箱数',
      dependencies: ['outPackageNum'],
      config: {
        precision: 0,
        min: 0,
      },
      rules: [
        ({ getFieldValue }: any) => ({
          validator: (_: any, value: number) => validateOutPackageNum(_, value, getFieldValue('outPackageNum')),
        }),
      ],
    },
    {
      name: 'outPackageNum',
      label: '外箱数',
      type: 'InputNumber',
      placeholder: '请输入外箱数',
      dependencies: ['inPackageNum'],
      config: {
        precision: 0,
        min: 0,
      },
      rules: [
        ({ getFieldValue }: any) => ({
          validator: (_: any, value: number) => validateOutPackageNum(_, getFieldValue('inPackageNum'), value),
        }),
      ],
    },
  ]
}
export const useFormFabric = ({
  isEdit,
  handleFabricChange,
  FabricOption,
  handleSearchFabric,
  detailInfo,
  detailDevInfo,
}: {
  isEdit: boolean
  handleFabricChange: (_: number[], info: IOptionItem[]) => void
  FabricOption: IOptionItem[]
  handleSearchFabric: (newValue: string, devSeason: number, bigClassId: number[]) => void
  detailInfo?: Record<string, any>
  detailDevInfo?: Record<string, any>
}): IItemArray[] => {
  return [
    {
      name: 'fabricConfigIds',
      label: '面料',
      type: 'Select',
      option: FabricOption,
      config: {
        suffixIcon: null,
        showSearch: true,
        optionFilterProp: 'label',
        mode: 'multiple',
        filterOption: false,
        onSearch: (newValue: string) =>
          handleSearchFabric(
            newValue,
            detailInfo?.devSeasonName || detailDevInfo?.seasonName,
            detailInfo?.bigClassId || detailDevInfo?.classId,
          ),
        notFoundContent: <Empty description="请输入内容搜索" image={Empty.PRESENTED_IMAGE_SIMPLE} />,
        onChange: handleFabricChange,
        disabled: !isEdit,
      },
      hidden: !isEdit,
    },
  ]
}
export const useFormColor = ({
  isEdit,
  handleColorChange,
  ColorOptions,
  handleSearchColor,
}: {
  isEdit: boolean
  handleColorChange: (_: number[], info: IColorListType[]) => void
  ColorOptions: IOptionItem[]
  handleSearchColor: (newValue: string) => void
}): IItemArray[] => {
  return [
    {
      name: 'colorDetailIds',
      label: '款式色',
      type: 'Select',
      option: ColorOptions,
      placeholder: '请选择款式色',
      config: {
        allowClear: false,
        suffixIcon: null,
        showSearch: true,
        optionFilterProp: 'label',
        mode: 'multiple',
        filterOption: false,
        onSearch: handleSearchColor,
        onChange: handleColorChange,
        notFoundContent: <Empty description="请输入内容搜索" image={Empty.PRESENTED_IMAGE_SIMPLE} />,
        disabled: !isEdit,
        optionRender: (option: any) => {
          return (
            <div style={{ display: 'flex', alignItems: 'center', padding: '0 12px' }}>
              {option?.data?.picUrl ? (
                <img
                  width={30}
                  height={30}
                  style={{ marginRight: 16, display: 'inline-block' }}
                  src={option?.data?.picUrl}
                />
              ) : (
                <div
                  style={{
                    width: 30,
                    height: 30,
                    display: 'inline-block',
                    verticalAlign: 'middle',
                    backgroundColor: `rgb${option?.data?.rgbValue}`,
                    marginRight: 16,
                  }}
                ></div>
              )}
              <div>{option?.label}</div>
            </div>
          )
        },
      },
      hidden: !isEdit,
    },
  ]
}
export const useFormUpload = ({ isEdit }: { isEdit: boolean }): IItemArray[] => {
  return [
    {
      name: 'mainPicFileId',
      label: '主图',
      config: { max: 1, disabled: !isEdit, showPaste: true },
      type: 'Upload',
    },
    {
      name: 'otherPicFileIdList',
      label: '其他图片',
      config: { max: 3, disabled: !isEdit, showPaste: true },
      type: 'Upload',
    },
  ]
}

export const useFabricDel = ({
  isEdit,
  FabricList: tableData,
  setFabricList: settableData,
  FabricOption,
  handleSearchFabric,
  SupplierOption,
  handleSearchSupplier,
  detailDevInfo,
  detailInfo,
  inputRef,
  FormStyle,
  ProDevSeason,
}: {
  isEdit: boolean
  FabricList: any[]
  setFabricList: React.Dispatch<React.SetStateAction<any[]>>
  FabricOption: IOptionItem[]
  handleSearchFabric: (
    newVal: string,
    devSeason?: number,
    bigClassId?: number[] | string,
    intensiveStatus?: 0 | 1,
  ) => void
  SupplierOption: IOptionItem[]
  handleSearchSupplier: (newVal: string) => void
  detailDevInfo: Record<string, any>
  detailInfo: Record<string, any>
  inputRef: React.MutableRefObject<any>
  FormStyle: FormInstance
  ProDevSeason: IOptionItem[]
}): TableColumnsType<any> => [
  {
    title: '操作',
    dataIndex: 'cz',
    key: 'cz',
    align: 'center',
    width: 80,
    render: (_, __, index) => {
      return (
        <Space
          size="small"
          style={{
            visibility: isEdit ? 'visible' : 'hidden',
          }}
        >
          {tableData.length > 1 && (
            <Typography.Link>
              <MinusSquareOutlined
                style={{ color: 'var(--error-color)' }}
                onClick={() => {
                  console.log('删除操作')
                  tableData.splice(index, 1)
                  settableData([...tableData])
                }}
              />
            </Typography.Link>
          )}
          {index === tableData.length - 1 && (
            <Dropdown
              onOpenChange={(show) => {
                setTimeout(() => {
                  show && inputRef.current?.focus()
                }, 400)
              }}
              menu={{
                items: [
                  {
                    key: 'addbtn',
                    label: (
                      <div
                        className="spec_input_drop_down"
                        style={{ display: 'flex', alignItems: 'center', gap: 6 }}
                        onClick={() => {
                          const val = inputRef?.current?.input?.value || 1
                          for (let index = 1; index <= val; index++) {
                            tableData.push({
                              tempId: index + new Date().getTime(),
                              isEdit: true,
                            })
                          }
                          settableData([...tableData])
                        }}
                      >
                        添加
                        <Input
                          ref={inputRef}
                          className="spec_input_drop_down"
                          style={{ width: 60, lineHeight: 0, height: 24 }}
                          defaultValue={1}
                          onClick={(event) => {
                            event.stopPropagation()
                          }}
                          onPressEnter={(event: any) => {
                            const val = event?.target?.value
                            for (let index = 1; index <= val; index++) {
                              tableData.push({
                                tempId: index + new Date().getTime(),
                                isEdit: true,
                              })
                            }
                            settableData([...tableData])
                          }}
                        ></Input>
                        行
                      </div>
                    ),
                  },
                ],
              }}
            >
              <Typography.Link>
                <PlusSquareOutlined />
              </Typography.Link>
            </Dropdown>
          )}
        </Space>
      )
    },
  },
  {
    title: '是否集约',
    dataIndex: 'intensiveStatus',
    key: 'intensiveStatus',
    align: 'center',
    width: 100,
    render: (info, rows) => {
      return isEdit ? (
        <div className="form_element_wrap">
          <Select
            value={info}
            options={[
              { label: '是', value: 1 },
              { label: '否', value: 0 },
            ]}
            onChange={(val) => {
              rows.intensiveStatus = val
              rows.materialsCode = null
              rows.fabricName = null
              settableData([...tableData])
            }}
          ></Select>
        </div>
      ) : (
        <div
          className="title_bgc_normal"
          onClick={() => {
            settableData([...tableData])
          }}
        >
          <span>{STATUSCONFIRMTEXT[info] || '-'}</span>
        </div>
      )
    },
  },
  {
    title: '使用部位',
    dataIndex: 'useSite',
    key: 'useSite',
    align: 'center',
    width: 80,
    render: (info, rows, index) => {
      return isEdit ? (
        <div className="form_element_wrap">
          <Input
            value={info || null}
            status={!rows.useSite ? 'error' : undefined}
            onChange={(event) => {
              rows.useSite = event.target.value
              settableData([...tableData])
            }}
          ></Input>
        </div>
      ) : (
        <div
          className="title_bgc_normal"
          onClick={() => {
            settableData([...tableData])
          }}
        >
          <span>{info || '-'}</span>
        </div>
      )
    },
  },
  {
    title: '面料名称',
    dataIndex: 'fabricName',
    key: 'fabricName',
    align: 'center',
    width: 180,
    render: (info, rows, index) => {
      return isEdit ? (
        <div className="form_element_wrap">
          {rows.intensiveStatus ? (
            <Select
              status={!rows.fabricName ? 'error' : undefined}
              onSearch={(newVal) => {
                handleSearchFabric(
                  newVal,
                  detailDevInfo?.seasonName ||
                    detailInfo?.devSeasonName ||
                    ProDevSeason?.find((item) => item.value == FormStyle.getFieldValue('seasonId'))?.label,
                  detailDevInfo?.bigClassId ||
                    detailInfo?.bigClassId ||
                    (Array.isArray(FormStyle.getFieldValue('classId'))
                      ? FormStyle.getFieldValue('classId')?.[0]
                      : null),
                  1,
                )
              }}
              onChange={(_, item: any) => {
                rows.fabricName = item?.label
                if (rows.intensiveStatus == 1) {
                  rows.materialsCode = item?.code
                  rows.fabricSupplier = item?.supplierNames
                  rows.fabricSpec = item?.yarnSpec
                  rows.fabricComposition = item?.fabricComposition
                  rows.fabricBreadth = item?.fabricBreadth
                  rows.gramWeight = item?.gramWeight
                }
                settableData([...tableData])
              }}
              value={info || null}
              options={FabricOption}
              popupMatchSelectWidth={false}
              suffixIcon={null}
              showSearch={true}
              filterOption={false}
              optionFilterProp="label"
              notFoundContent={<Empty description="请输入内容搜索" image={Empty.PRESENTED_IMAGE_SIMPLE} />}
            ></Select>
          ) : (
            <Input
              value={info || null}
              status={!rows.fabricName ? 'error' : undefined}
              onChange={(event) => {
                rows.fabricName = event.target.value
                settableData([...tableData])
              }}
            ></Input>
          )}
        </div>
      ) : (
        <div
          className="title_bgc_normal"
          onClick={() => {
            settableData([...tableData])
          }}
        >
          <div className="fabric_circle">
            <span>{info}</span>
            {index === 0 && <span className="fabric_circle_text">主</span>}
          </div>
        </div>
      )
    },
  },
  {
    title: '面料供应商',
    dataIndex: 'fabricSupplier',
    key: 'fabricSupplier',
    align: 'center',
    width: 180,
    render: (info, rows, index) => {
      return isEdit ? (
        <div className="form_element_wrap">
          {rows.intensiveStatus ? (
            <Select
              value={info || null}
              onSearch={(newVal) => {
                handleSearchSupplier(newVal)
              }}
              onChange={(_, item: any) => {
                rows.fabricSupplier = item?.label
                settableData([...tableData])
              }}
              status={rows?.intensiveStatus == 1 && !rows.fabricSupplier ? 'error' : undefined}
              options={SupplierOption}
              popupMatchSelectWidth={false}
              suffixIcon={null}
              showSearch={true}
              filterOption={false}
              optionFilterProp="label"
              notFoundContent={<Empty description="请输入内容搜索" image={Empty.PRESENTED_IMAGE_SIMPLE} />}
            ></Select>
          ) : (
            <Input
              value={info || null}
              status={rows?.intensiveStatus == 1 && !rows.fabricSupplier ? 'error' : undefined}
              onChange={(event) => {
                rows.fabricSupplier = event.target.value
                settableData([...tableData])
              }}
            ></Input>
          )}
        </div>
      ) : (
        <div
          className="title_bgc_normal"
          onClick={() => {
            settableData([...tableData])
          }}
        >
          <span>{info || '-'}</span>
        </div>
      )
    },
  },
  {
    title: '规格',
    dataIndex: 'fabricSpec',
    key: 'fabricSpec',
    align: 'center',
    width: 100,
    render: (info, rows, index) => {
      return isEdit ? (
        <div className="form_element_wrap">
          <Input
            value={info || null}
            onChange={(event) => {
              rows.fabricSpec = event.target.value
              settableData([...tableData])
            }}
            status={rows?.intensiveStatus == 1 && !rows.fabricSpec ? 'error' : undefined}
          ></Input>
        </div>
      ) : (
        <div
          className="title_bgc_normal"
          onClick={() => {
            settableData([...tableData])
          }}
        >
          <span>{info || '-'}</span>
        </div>
      )
    },
  },
  {
    title: '成分',
    dataIndex: 'fabricComposition',
    key: 'fabricComposition',
    align: 'center',
    width: 140,
    render: (info, rows, index) => {
      return isEdit ? (
        <div className="form_element_wrap">
          <Input
            value={info || null}
            onChange={(event) => {
              rows.fabricComposition = event.target.value
              settableData([...tableData])
            }}
            status={rows?.intensiveStatus == 1 && !rows.fabricComposition ? 'error' : undefined}
          ></Input>
        </div>
      ) : (
        <div
          className="title_bgc_normal"
          onClick={() => {
            settableData([...tableData])
          }}
        >
          <span>{info || '-'}</span>
        </div>
      )
    },
  },
  {
    title: '幅宽（cm）',
    dataIndex: 'fabricBreadth',
    key: 'fabricBreadth',
    align: 'center',
    width: 100,
    render: (info, rows, index) => {
      return isEdit ? (
        <div className="form_element_wrap">
          <Input
            value={info || null}
            onChange={(event) => {
              rows.fabricBreadth = event.target.value
              settableData([...tableData])
            }}
            status={rows?.intensiveStatus == 1 && !rows.fabricBreadth ? 'error' : undefined}
          ></Input>
        </div>
      ) : (
        <div
          className="title_bgc_normal"
          onClick={() => {
            settableData([...tableData])
          }}
        >
          <span>{info || '-'}</span>
        </div>
      )
    },
  },
  {
    title: '克重（g/m²）',
    dataIndex: 'gramWeight',
    key: 'gramWeight',
    align: 'center',
    width: 100,
    render: (info, rows, index) => {
      return isEdit ? (
        <div className="form_element_wrap">
          <Input
            value={info || null}
            onChange={(event) => {
              rows.gramWeight = event.target.value
              settableData([...tableData])
            }}
            status={rows?.intensiveStatus == 1 && !rows.gramWeight ? 'error' : undefined}
          ></Input>
        </div>
      ) : (
        <div
          className="title_bgc_normal"
          onClick={() => {
            settableData([...tableData])
          }}
        >
          <span>{info || '-'}</span>
        </div>
      )
    },
  },
]

export const useColorDel = ({
  isEdit,
  onDelColor,
  ColorList,
  setColorList,
}: {
  isEdit: boolean
  onDelColor: (info: IOptionItem) => void
  ColorList: IColorListType[]
  setColorList: React.Dispatch<React.SetStateAction<IColorListType[]>>
}): TableColumnsType<IColorListType> => [
  {
    width: 100,
    title: '颜色编码',
    dataIndex: 'code',
    key: 'code',
    align: 'center',
    render: (info) => {
      return info || '-'
    },
  },
  {
    width: 100,
    title: '颜色名称',
    dataIndex: 'label',
    key: 'label',
    align: 'center',
    render: (info) => {
      return info || '-'
    },
  },
  {
    width: 100,
    title: '图片',
    dataIndex: 'picUrl',
    key: 'picUrl',
    align: 'center',
    render: (info, rows) => {
      return info ? (
        <img style={{ width: 30, height: 30 }} src={info} />
      ) : rows?.rgbValue ? (
        <span
          style={{
            width: 30,
            height: 30,
            display: 'inline-block',
            verticalAlign: 'middle',
            backgroundColor: `rgb${rows?.rgbValue}`,
          }}
        ></span>
      ) : (
        '-'
      )
    },
  },
  {
    width: 80,
    title: '主辅色',
    dataIndex: 'colorType',
    key: 'colorType',
    align: 'center',
    render: (_, rows) => {
      return isEdit ? (
        <Select
          value={rows.colorType}
          allowClear
          style={{ width: '100%' }}
          options={[
            { label: '主色', value: 0 },
            { label: '辅色', value: 1 },
          ]}
          onChange={(val) => {
            rows.colorType = val
            setColorList([...ColorList])
          }}
        ></Select>
      ) : rows?.colorType == 0 ? (
        '主色'
      ) : rows?.colorType == 1 ? (
        '辅色'
      ) : (
        '-'
      )
    },
  },
  {
    title: '操作',
    fixed: 'right',
    width: 100,
    align: 'center',
    render: (info) => {
      return (
        <Space size="large">
          <Typography.Link disabled={!isEdit || info.status == 3} onClick={() => onDelColor(info)}>
            删除
          </Typography.Link>
        </Space>
      )
    },
  },
]

export const useFormPlanInfo = ({
  ProDevSeason,
  classIdOptions,
  handleChangeClassId,
  showOriginSalePrice,
  isSpotDev,
  detailDevInfo,
}: {
  ProDevSeason: IOptionItem[]
  classIdOptions: IOptionClass[]
  handleChangeClassId: (val: any) => void
  showOriginSalePrice: boolean
  isSpotDev: boolean
  detailDevInfo: Record<string, any>
}): IItemArray[] => {
  return [
    {
      label: '采购方式',
      type: 'Custom',
      slot: '现采',
      hidden: !isSpotDev,
    },
    {
      label: '开发季',
      name: 'seasonId',
      type: 'Select',
      option: ProDevSeason,
      rules: [
        {
          required: true,
          message: '请选择开发季',
        },
      ],
    },
    {
      name: 'classId',
      label: '款式分类',
      type: 'Cascader',
      placeholder: '请选择款式分类',
      option: classIdOptions,
      config: {
        changeOnSelect: true,
        fieldNames: { label: 'className', value: 'classConfigId', children: 'childrenList' },
        onChange: handleChangeClassId,
      },
      rules: [
        {
          required: true,
          message: '请选择款式分类',
        },
        {
          validator: (_: any, value: string[]) => {
            if (!value) {
              return Promise.resolve()
            } else if (value.length != 4) {
              return Promise.reject(new Error('请选择到细类！'))
            } else {
              return Promise.resolve()
            }
          },
        },
      ],
    },
    {
      name: 'originSalePrice',
      label: '预估吊牌价',
      type: 'InputNumber',
      placeholder: '请输入预估吊牌价',
      hidden: !showOriginSalePrice,
      rules: [
        {
          required: true,
          message: '请输入预估吊牌价',
        },
      ],
      config: {
        precision: 2,
        min: 0,
      },
    },
  ]
}
